<template>
  <div class="app-container">
    <el-card class="box-card config-box" shadow="never" :style="{height:tableHeight+'px'}">
      <div slot="header" class="clearfix">
        <span>平台配置</span>
      </div>
      <el-row>
        <el-col :span="8">系统名称</el-col>
        <el-col :span="12">{{ form.menuBarTitle }}</el-col>
        <el-col :span="2">
          <el-button @click="editData('menuBarTitle')">修改</el-button>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="8">菜单栏模块数量</el-col>
        <el-col :span="12">{{ form.menuNum }}</el-col>
        <el-col :span="2">
          <el-button @click="editData('menuNum')">修改</el-button>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="8">菜单栏Logo</el-col>
        <el-col :span="12"><img v-if="isImage" :src="dialogImageUrl" class="avatar"></el-col>
        <el-col :span="2">
          <el-button @click="editData('logo')">修改</el-button>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="8">平台主题</el-col>
        <el-col :span="12">{{ form.configTheme.name }}</el-col>
        <el-col :span="2">
          <el-button @click="editData('theme')">修改</el-button>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">建筑树顶级名称</el-col>
        <el-col :span="12">{{ form.buildTreeTopName }}</el-col>
        <el-col :span="2">
          <el-button @click="editData('buildTreeTopName')">修改</el-button>
        </el-col>
      </el-row>

    </el-card>
    <el-dialog :visible.sync="editOpen" :close-on-click-modal="false" class="customForm _baseForm_auto">
      <div slot="title">
        <span><i class="el-icon-edit"></i></span>
        <span>修改</span>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="160px">
        <el-row>
          <el-col :span="24" v-if="editType==='menuBarTitle'">
            <el-form-item label="系统名称：" prop="menuBarTitle">
              <el-input v-model="form.menuBarTitle" placeholder="请输入系统名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="editType==='menuNum'">
            <el-form-item label="功能显示数量：" prop="menuNum">
              <el-input-number v-model="form.menuNum" :min="1" :max="7" label="数量"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="editType==='logo'">
            <el-form-item label="菜单栏Logo：" prop="menuBarLogo">
              <el-upload
                ref="upload"
                v-loading="pic_loading"
                class="avatar-uploader"
                :headers="headers"
                :action="uploadUrl"
                accept=".png,.jpg"
                list-type="picture-card"
                :show-file-list="false"
                :on-change="getFile"
                :auto-upload="false"
              >
                <img v-if="isImage" :src="dialogImageUrl" class="avatar">
                <i v-else class="avatar-uploader-icon">暂无照片</i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="editType==='theme'">
            <div class="theme-box" v-for="themeItem in themeList" @click="changeTheme(themeItem.themeId,themeItem.name)"
                 :class="{'selected':themeItem.themeId==form.themeId}">
              <div class="theme-top" :style="{background:themeItem.menuTopBg}">
                {{ themeItem.name }}
              </div>
              <div class="theme-content">
                <div class="theme-left" :style="{background:themeItem.menuLeftBg}"></div>
                <div class="theme-right"></div>
              </div>
            </div>
          </el-col>
          <el-col :span="24" v-if="editType==='buildTreeTopName'">
            <el-form-item label="系统名称：" prop="buildTreeTopName">
              <el-input v-model="form.buildTreeTopName" placeholder="请输入建筑树顶级名称"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div>
          <el-button type="primary" @click="handleSave">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>

      </div>
    </el-dialog>
  </div>
</template>
<script>
import configBase from "./configBase";

export default {
  ...configBase
}
</script>
<style scoped lang="scss">
.app-container {
  overflow: auto;

  .config-box {
    .el-row {
      text-align: center;
      line-height: 50px;
      border-bottom: 1px solid #e1e3e7;
    }

    .avatar {
      background: #cecac4;
      height: 40px;
      position: relative;
      top: 10px;
      width: auto;
    }
  }

  .theme-box {
    width: 240px;
    height: 130px;
    cursor: pointer;
    display: inline-block;
    margin: 10px;
    border: 1px solid #999999;
    border-radius: 5px;

    .theme-top {
      height: 70px;
      cursor: pointer;
      background-color: #1c84c6;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
      color: #FFFFFF;
      text-align: center;
      line-height: 70px;
    }

    .theme-content {
      height: 58px;

      .theme-left {
        width: 60px;
        cursor: pointer;
        background-color: #00afff;
        float: left;
        height: 100%;
        border-bottom-left-radius: 5px;
      }

      .theme-right {
        float: left;
        height: 100%;
        width: 178px;
        cursor: pointer;
        border-bottom-right-radius: 5px;
        background-color: #999999;
      }
    }

  }

  .theme-box.selected {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      border: 16px solid #02b978;
      border-top-color: transparent;
      border-left-color: transparent;
    }

    &::after {
      content: '';
      width: 5px;
      height: 10px;
      position: absolute;
      right: 6px;
      bottom: 7px;
      border: 1px solid #fff;
      border-top-color: transparent;
      border-left-color: transparent;
      transform: rotate(45deg);
    }
  }
}

</style>
<style scoped>

/deep/ .el-upload--picture-card {
  background-color: #bdb8b8 !important;
  height: auto !important;
  width: 200px !important;
}
</style>
